<!-- home -->
<template>
  <div>
    <ValidationObserver ref="observer" v-slot="{ passes, invalid }" tag="form" @submit.prevent="submit()">
      <van-cell-group>
        <ValidationProvider name="用户名" rules="required|secret" v-slot="{ errors }">
          <van-field
            v-model="value1"
            placeholder="请输入用户名"
            label="输入框"
            clearable
            :error-message="errors[0]"
          />
        </ValidationProvider>
        <ValidationProvider name="picker" rules="required" v-slot="{ errors }">
          <van-field
            readonly
            clickable
            label="普通picker"
            :value="value2"
            placeholder="请选择"
            @click="showPicker = true"
            :error-message="errors[0]"
          />
        </ValidationProvider>
        <van-field v-model="code" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <!-- <van-button slot="button" size="small" type="primary">发送验证码</van-button> -->
          <SendCode slot="button" v-bind="{size : 'small', type : 'primary'}"/>
        </van-field>
        <van-field
          v-model="message"
          rows="2"
          autosize
          label="留言"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
      </van-cell-group>
      <div style="padding:10px;">
        <van-button type="primary" block :disabled='invalid'>提交</van-button>
      </div>
    </ValidationObserver>

    <!-- 普通picker -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="label"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
// import { api } from '@/config'
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
import { required } from 'vee-validate/dist/rules'
import zh from 'vee-validate/dist/locale/zh_CN'
extend('secret', {
  validate: value => value === 'example',
  message: 'This is not the magic word'
})
extend('required', {
  ...required,
  message: zh.messages['required']
})

import {
  Button, Picker, Popup, Field, CellGroup
} from 'vant'
import SendCode from '@/components/SendCode'
export default {
  components: {
    'van-button': Button,
    'van-picker': Picker,
    'van-popup': Popup,
    'van-field': Field,
    'van-cell-group': CellGroup,
    SendCode,
    ValidationObserver,
    ValidationProvider
  },

  data () {
    return {
      value1: '',
      value2: '',
      showPicker: false,
      columns: [{ label: '杭州', value: 1 }],
      // 验证码
      code: '',
      message: ''
    }
  },

  computed: {},

  created () {
  },

  mounted () {

  },

  methods: {
    openPicker() {
      this.showPicker = !this.showPicker
    },
    onConfirm(obj) {
      this.value2 = obj.label
      this.showPicker = false
    },
    async submit() {
      const isValid = await this.$refs.observer.validate()
      console.log(isValid)

      if (!isValid) {
        // ABORT!!
         console.log('验证失败')
      } else {
        console.log('验证通过')
      }
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
